<template>
  <div class="wrapper">
    <div class="content">
      <div class="left">
        <el-card class="box-card1">1</el-card>
        <el-card class="box-card2">2</el-card>
      </div>
      <div class="right">
        <div class="top">
          <el-card class="box-card3">3</el-card>
          <el-card class="box-card3">4</el-card>
          <el-card class="box-card3">5</el-card>
        </div>
        <div class="bottom">
          <el-card class="box-card4">6</el-card>
        </div>
      </div>
    </div>
    <!-- 图表 -->
    <div class="photo">
      <div class="left">
        <el-card class="box-card5" id="main"> </el-card>
      </div>
      <div class="right">
        <el-card class="box-card5">7</el-card>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {};
  },
  mounted() {
    this.getlist1();
  },
  methods: {
    getlist1() {
      var myChart = this.$echarts.init(document.getElementById("main"));


      // 指定图表的配置项和数据
      let option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "2015", "2016", "2017"],
            ["周一", 43.3, 85.8, 93.7],
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["周二", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
            ["周三", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
            ["周四", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
            ["周五", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  computed: {},
  watch: {},
  created() {},
};
</script>


<style scoped>
.content {
  display: flex;
  height: 600px;
  background: red;
}
.left {
  width: 40%;
}
.box-card1 {
  height: 48%;
  background: #ccc;
}
.box-card2 {
  height: 48%;
  background: #ccc;
  margin-top: 4%;
}
.right {
  width: 60%;


  background: #ccc;
}
.right .top {
  display: flex;
  height: 10%;
  justify-content: space-around;
}
.box-card3 {
  width: 30%;
}
.bottom {
  width: 100%;
  height: 90%;
  margin-top: 8%;
}
.box-card4 {
  height: 90%;
}
.photo {
  width: 100%;
  height: 400px;
  background: #ccc;
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}
.photo .left {
  width: 50%;
  height: 100%;
  background: blue;
}
.photo .right {
  width: 50%;
  height: 100%;
  background: blue;
}
.box-card5 {
  width: 100%;
  height: 100%;
}
</style>